<template>
  <div class="reflection-container">
    <div class="card">
      <div class="card-face card-face--front">
        <img src="@/assets/images/xiamu3.jpg" alt="">
      </div>
      <div class="card-face card-face--back">
        <img src="@/assets/images/xiamu4.jpg" alt="">
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.reflection-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #1a1e23;
  height: 500px;
  padding-top: 10px;
  .card {
    display: flex;
    position: relative;
    width: 200px;
    height: 300px;
    transform-style: preserve-3d;
    transition: 1s ease;
    &:hover {
      transform: rotateY(0.5turn);
    }
  }
  .card-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: 1s ease;
    -webkit-box-reflect: below 0 -webkit-linear-gradient(transparent, transparent, rgba(0,0,0,0.4));
    -moz-box-reflect: below 0 -moz-linear-gradient(transparent, transparent, rgba(0,0,0,0.4));
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    &--back {
      transform: rotateY(0.5turn);
    }
  }
}
</style>
